import React from 'react';
import { View, Image, ScrollView } from 'react-native';
import { Lt, Color, Label, Button, Images, ImagePt, Jpp, Touch, Dialog, Flist } from "./_utils";

const c_images = [Images.huiyuan_bg1, Images.huiyuan_bg2, Images.huiyuan_bg3, Images.huiyuan_bg4];
const c_ipts = [ImagePt.huiyuan_bg1, ImagePt.huiyuan_bg2, ImagePt.huiyuan_bg3, ImagePt.huiyuan_bg4]

// 粉丝和代理的会员界面
export class ViewPreVip extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isCheck : false,
            isRead : false,
        }
        this.onCheck = this.onCheck.bind(this);
        this.onRead = this.onRead.bind(this);
        this.onClick = this.onClick.bind(this);
        this.onLoad = this.onLoad.bind(this);
        this.onItem = this.onItem.bind(this);
    }
    onCheck(){
        this.setState({isCheck:!this.state.isCheck});
    }
    onRead(){
        this.onCheck();
    }
    onClick(){
        // !this.state.isRead || 
        if(!this.state.isCheck){
            Dialog.msg1("您未同意服务协议!");
            return;
        }
        const { onClick } = this.props;
        onClick && onClick();
    }
    onLoad(params){
        if(params.page > 5){
            params.add();
            return;
        }
        params.add1(1);
    }
    onItem(params){
        let idx = params.index;
        if(idx <= 3){
            return <Image style = {{width:"100%", height:Jpp.width * c_ipts[idx].r}} source = {c_images[idx]}/>;
        }
        if(idx == 4){
            return  <View style={{marginTop:Lt.margin, flexDirection:"row", alignItems:"center", alignSelf:"center"}}>
                <Touch style={{padding:Lt.pad}} onPress={this.onCheck}>
                    <Image source={this.state.isCheck ? Images.yuandu_gou : Images.yuan_wei}/>
                </Touch>
                <Label style = {{fontSize:Lt.c16, color:"#FFF195"}}>已阅读并同意</Label>
                <Touch style={{padding:Lt.pad}} onPress={this.onRead}>
                    <Label style = {{fontSize:Lt.c16, color:Color.theme}}>《服务协议》</Label>
                </Touch>
            </View>;
        }
        return <Button.FlexPure title={"成为运营商"} onPress={this.onClick} style={{marginVertical:0}}/>;
    }
    render(){
        return <View style = {{flex:1, backgroundColor:"black"}}>
            <Flist
                style = {{flex:1}}
                endStr = {""}
                onLoad = {this.onLoad}
                onItem = {this.onItem}
            />
        </View>;
    }
}
